<template>
	<view>
		<view class="top_box">
			<text>运价</text>
			<view class="">
				<text class="textY">70.00</text>
				<text>元/吨</text>
			</view>
			<view class="">
				<text>预估收入</text>
				<text class="textY">2083.50元</text>
			</view>
		</view>
		<view class="center_box">
			<text>线路信息</text>
			<view class="xinxi">
				<view class="xunh">
					<view class="yaodong">
						<view class="zuo">
							<image src="/photo/zhaohuo/diandian.png" mode=""
								style="width: 40rpx;height: 80rpx;margin-top: 17rpx;"></image>
						</view>
						<view class="you">
							<view style="font-size: 28rpx;height: 70rpx;">
								德源煤矿 - 榆林府谷
							</view>
							<view style="font-size: 28rpx;height: 70rpx;">
								冯家川站台 - 忻州保德
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fonter_box">
			<text>货源信息</text>
			<uni-section>
				<uni-list border="false">
					<uni-list-item title="货物" :rightText="csTest" />
					<uni-list-item title="货源编号" rightText="右侧文字" />
					<uni-list-item title="供应商" rightText="右侧文字" />
					<uni-list-item title="开始时间" rightText="右侧文字" />
					<uni-list-item title="结束时间" rightText="右侧文字" />
				</uni-list>
			</uni-section>
		</view>
		<view style="background-color: #d1d9ec;height: 100rpx; padding: 30rpx;border-radius: 10rpx;margin: 20rpx;">
			<text>要求：</text>
		</view>

	</view>
</template>

<script setup>
import { ref } from 'vue';

const csTest = ref("张三")
</script>

<style>
	.top_box {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.top_box text {
		height: 50rpx;
		line-height: 50rpx;
	}

	.center_box {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.fonter_box {
		padding: 20rpx;
	}

	.textY {
		font-size: 40rpx;
		color: red;
	}

	.xunh {
		background-color: #FFFFFF;
		margin-top: 10rpx;
	}

	.yaodong {
		display: flex;
		padding-top: 20rpx;
	}
</style>